<template>
  <view class="container">
    <view class="content">
      <view class="header_txt">
        <view class="back"
              @click="goback">
          <image src="/static/img/back3.png"></image>
        </view>
        <view class="title"> 模考刷题 </view>
      </view>
      <!-- <view class="top_next flexs3">
        <view class="flexs">
          <view class="flexs1">
            <view class="top_title">行业分类</view>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_xl@2x.png"
                   mode=""></image>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_sl@2x.png"
                   mode=""></image>
          </view>
          <view class="flexs1">
            <view class="top_title">不限</view>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_xl@2x.png"
                   mode=""></image>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_sl@2x.png"
                   mode=""></image>
          </view>
          <view class="flexs1">
            <view class="top_title">最新</view>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_xl@2x.png"
                   mode=""></image>
            <image class="top_image"
                   src="../../static/image/kqfx_ico_sl@2x.png"
                   mode=""></image>
          </view>

        </view>

      </view> -->

      <!-- 排序区域 -->
      <view class="solt_bar">
        <view class="item"
              @click="toggle('hangye')">
          <view class="top_title">行业分类</view>
          <image class="top_image"
                 v-if="!hangye"
                 src="../../static/image/kqfx_ico_xl@2x.png"></image>
          <image class="top_image"
                 v-if="hangye"
                 src="../../static/image/kqfx_ico_sl@2x.png"></image>
        </view>
        <view class="item"
              @click="toggle('moneyshow')">
          <view class="top_title">不限</view>
          <image class="top_image"
                 v-if="!moneyshow"
                 src="../../static/image/kqfx_ico_xl@2x.png"></image>
          <image class="top_image"
                 v-if="moneyshow"
                 src="../../static/image/kqfx_ico_sl@2x.png"></image>
        </view>

        <view class="item"
              @click="toggle('timeshow')">
          <view class="top_title">最新</view>
          <image class="top_image"
                 v-if="!timeshow"
                 src="../../static/image/kqfx_ico_xl@2x.png"></image>
          <image class="top_image"
                 v-if="timeshow"
                 src="../../static/image/kqfx_ico_sl@2x.png"></image>
        </view>
      </view>
      <!-- 不限 -->
      <view class="t">
        <sortModel v-show="moneyshow"
                   @selectChange="togglePrice"
                   :dataList="scoreList"></sortModel>

      </view>

      <!-- 最新 -->
      <view class="t">
        <sortModel v-show="timeshow"
                   @selectChange="toggleTime"
                   :dataList="timeSortList"></sortModel>

      </view>

      <!-- 行业分类 -->
      <hangyeModel @changeArr="changeArr"
                   v-if="hangye"></hangyeModel>
      <!-- 行业分类 -->
      <!-- 		<view class='mask'></view>
		<view class="model ">
			<view class="model_left_box">
				<view class="model_left">
					<view class="left_list flexs model_border">
						<view class="left_color"></view>全部
					</view>
					<view class="left_list flexs model_border">
						<view class="left_color"></view>{{89}}
					</view>
				</view>
				<view class="model_right">
					<view class="right_box">
						<view class="flexs2">
							<view class="right_list">{{54}}</view>
							<view class="right_chexs">
								<view></view>
								<image src="../../static/image/ico_xz@2x.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexs1">
				<view class="bottom_bs flexs" >重置</view>
				<view class="bottom_ps flexs" >确定</view>
			</view>
		</view> -->

      <!-- 不限 -->
      <!-- 		<view class='mask' ></view>
		<view class="model" >
			<view class="time_center">
				<view class="right_box" >
					<view class="flexs2">
						<view class="right_list time_font">{{25}}</view>
						<view class="right_chexs">
							<image src="../../static/image/ico_xz@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		 -->

      <!-- 最新 -->
      <!-- 		<view class='mask' ></view>
		<view class="model" >
			<view class="time_center">
				<view class="right_box" >
					<view class="flexs2">
						<view class="right_list time_font">{{12}}</view>
						<view class="right_chexs">
							<image src="../../static/image/ico_xz@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view> -->

      <view class="list_box">
        <view class="none_msg"
              v-show="companyList.length == 0">
          <image src="../../static/image/kqfx_img_k@2x.png"
                 mode=""></image>
          <view class="none_title">暂无信息</view>
        </view>
        <navigator :url="`/pages/kaoq/Famous_Det?id=`+item.id"
                   class="list_item"
                   v-for="item in companyList"
                   :key="item.id">
          <view class="list_item_top">
            <view class="list_top_l">
              <image :src="$serverIp+item.image"
                     mode=""></image>
              <view class="list_top_title">{{item.name}}</view>
            </view>
            <view class="list_top_r">
              <view class="list_top_fens">{{item.score}}</view>
              <view class="list_top_plnum">({{item.evaluate_num}}人评价)</view>
            </view>
          </view>
          <view class="list_item_con"
                v-html="item.analysis">

          </view>
          <view class="list_btm_box">
            <view class="list_btm_item">
              <image src="../../static/image/jyjq_ico_sc@2x.png"
                     mode=""></image>{{item.collect_num}}
            </view>
            <view class="list_btm_item">
              <image src="../../static/image/sy_ico_dz@2x.png"
                     mode=""></image>{{item.like_num}}
            </view>
            <view class="list_btm_item">
              <image src="../../static/image/zpzx_ico_yd@2x.png"
                     mode=""></image>{{item.watch_num}}
            </view>
            <view class="list_btm_item">
              <image src="../../static/image/kqfx_ico_llrc@2x.png"
                     mode=""></image>{{item.watch_person_num}}
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import { timeSortList, scoreList } from './data'
import sortModel from '../../components/sortModel'
import hangyeModel from '../../components/hangyeModel'
export default {
  components: { sortModel, hangyeModel },
  data() {
    return {
      timeSortList,
      scoreList,
      timeshow: false,
      hangye: false,
      moneyshow: false,
      queryParams: { class_id: '', score: 0, order: 1 },
      companyList: []
    }
  },
  onLoad() {
    this.getCompanyList()
  },
  methods: {
    changeArr(selectClassificationIds) {
      this.queryParams.class_id = selectClassificationIds.join(',')
      this.getCompanyList()
      setTimeout(() => (this.hangye = false), 200)
    },
    togglePrice(item) {
      this.queryParams.score = item.score
      this.queryParams.order = 2
      setTimeout(() => (this.moneyshow = false), 100)
      this.getCompanyList()
    },
    toggleTime(item) {
      this.queryParams.order = item.order
      setTimeout(() => (this.timeshow = false), 100)
      this.getCompanyList()
    },
    //Company/index
    async getCompanyList() {
      const { data } = await this.$http.post('/Company/index', this.queryParams)

      this.companyList = data.data
    },
    toggle(name) {
      this[name != 'timeshow' ? 'timeshow' : ''] = false
      this[name != 'hangye' ? 'hangye' : ''] = false
      this[name != 'moneyshow' ? 'moneyshow' : ''] = false
      this[name] = !this[name]
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* 排序区域 */
.solt_bar {
  background-color: #fff;
  width: 750rpx;
  height: 70rpx;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;

    .top_image {
      width: 16rpx;
      height: 10rpx;
      margin-left: 6rpx;
    }
  }
}

/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  /* // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // } */

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
/* 列表 */
.list_box {
  width: 100%;
  height: auto;
  overflow-y: auto;
  margin-top: 5rpx;
}
.list_item {
  width: 100%;
  height: auto;
  padding: 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
  box-sizing: border-box;
}
.list_item_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.list_top_l {
  width: auto;
  display: flex;
  align-items: flex-start;
}
.list_top_l image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 19rpx;
  background-color: #f5f5f5;
}
.list_top_title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.list_top_r {
  text-align: center;
}
.list_top_fens {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff3b30;
}
.list_top_plnum {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.list_item_con {
  width: 100%;
  height: auto;
  margin-top: 18rpx;
}
.list_btm_box {
  width: 100%;
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
}
.list_btm_item {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  align-items: center;
}
.list_btm_item image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
/* top */
.top_next {
  width: 100%;
  line-height: 70rpx;
  font-size: 26rpx;
  background-color: #ffffff;
  position: fixed;
  top: 88rpx;
  /* #ifdef APP-PLUS */
  top: 0;
  /* #endif */
  z-index: 20;
}

.top_title {
  margin-right: 8rpx;
  font-size: 26rpx;
}

.top_kong {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}

.image_last {
  width: 163rpx;
  height: 177rpx;
  margin-bottom: 16rpx;
}

.last_text {
  color: #666666;
  font-size: 26rpx;
}

.kong_mt {
  margin-top: 120rpx;
}
.top_image {
  width: 16rpx;
  height: 10rpx;
}
/* model 行业分类 */
.model {
  width: 100%;
  height: auto;
  color: #333333;
  font-size: 28rpx;
  position: absolute;
  top: 102rpx;
  z-index: 100;
}

.mask {
  position: fixed;
  top: 200rpx;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.model_border {
  background-color: #ffffff;
}
.model_left_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.model_left {
  width: 200rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #dddddd;
  font-size: 28rpx;
}

.model_right {
  width: 550rpx;
  height: 500rpx;
  background-color: #ffffff;
  overflow-y: auto;
}

.right_list {
  width: 100%;
  line-height: 100rpx;
  font-size: 28rpx;
}

.right_chexs image {
  width: 26rpx;
  height: 18rpx;
}

.right_box {
  padding: 0 30rpx;
}

.left_list {
  position: relative;
}

.left_color {
  width: 4rpx;
  height: 20rpx;
  background-color: #ffdd47;
  position: absolute;
  left: 0;
}

.bottom_bs {
  width: 50%;
  height: 88rpx;
  background-color: #ffffff;
  font-size: 30rpx;
}

.bottom_ps {
  width: 50%;
  height: 88rpx;
  background-color: #ffdd47;
  font-size: 30rpx;
}

/* cemter */
.center {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 0 30rpx;
}

.center_pay {
  font-size: 22rpx;
  color: #999999;
}

.cemter_last {
  font-size: 34rpx;
  color: #ff3b30;
  font-weight: bold;
}

.center_study {
  margin-top: 6rpx;
  color: #666666;
  font-size: 24rpx;
}

.center_right {
  width: 475rpx;
  height: auto;
  border-bottom: solid 1rpx #e5e5e5;
  padding: 20rpx 0;
}

.top_titles {
  height: 70;
  color: #333333;
  font-size: 28rpx;
  font-weight: bold;
}

.center_image {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
}

.center_maozi {
  width: 28rpx;
  height: 26rpx;
  margin-right: 6rpx;
}

.fwt {
  font-size: 24rpx;
}
/* shijian */
.time_font {
  font-weight: bold;
}

.time_center {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  font-size: 28rpx;
}

/* 暂无消息 */
.none_msg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 300rpx;
}

.none_msg image {
  width: 354rpx;
  height: 253rpx;
}

.none_title {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 40rpx;
}
</style>

